<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef"  @selection-change="selectChange">
      <template #tableAfterButtons>
        <a-button
            @click="batchAudit"
            type="outline"
            status="success"
        ><template #icon><IconExperiment /></template>批量审核</a-button>
      </template>

      <template #member="{ record }">
        <div class="flex items-center justify-start">
          <text class="text-xs ml-1 flex align-center">{{ record.member.nickname }}</text>
        </div>

      </template>

      <template #qrcode="{ record }">
        <div class="flex items-center justify-start" v-if="record.apply_qrcode">
          <img :src="record.apply_qrcode.qrcode ? $tool.showFile(record.apply_qrcode.qrcode):''" alt="" srcset="" height="50" width="50">
          <text class="text-xs ml-1 flex align-center">{{ record.apply_qrcode.qrcode_name }}</text>
        </div>
      </template>

      <template #operationBeforeExtend="{ record }">
        <a-link @click="audit(record)" v-if="record.status == 0"><icon-arrow-up /> 审核</a-link>
      </template>
    </ma-crud>

    <a-modal
        v-model:visible="visible"
        @ok="doApplyAudit"
        @cancel="approveClose"
        okText="审核" cancelText="关闭"
        unmountOnClose
        draggable
    >
      <template #title>
        title
      </template>
      <div>
        <a-form :model="approveForm">
          <a-form-item field="remark" label="审核备注">
            <a-input v-model="approveForm.remark" placeholder="拒绝时请填写拒绝原因"/>
          </a-form-item>
          <a-form-item field="status" label="审核结果">
            <a-radio-group v-model="approveForm.status" :options="[{ label: '通过', value: 1 },{ label: '拒绝', value: 2 }]" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import api from '@/api/prm/activity_apply.js'
import { Message } from '@arco-design/web-vue'

const crudRef = ref()
//选中项
const selecteds = ref([])
//设置选中项
const selectChange = (val) => selecteds.value = val
//审核弹窗
const visible = ref(false);
//审核表单
const approveForm = ref({applyId:0,remark:'',status:1});

const audit = async (record) => {
  approveForm.value.applyId = record.id
  visible.value = true;
}
const batchAudit = async () => {
  console.log(selecteds.value);

  if (selecteds.value.length === 0) {
    Message.error('至少要选择一条数据')
    return
  }

  approveForm.value.applyId = selecteds.value
  visible.value = true;
}

const approveClose = () => {
  visible.value = false;
}
//执行审核
const doApplyAudit = async () => {

  let response
  response = await api.applyAudit(approveForm.value)

  response.success && Message.success(response.message)

  crudRef.value.refresh()
}

//表格
const crud = reactive({
  api: api.applyList,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 200,
  searchColNumber:3,
  add: {show: false, api: api.add, auth: ['prm:apply:save']},
  edit: {show: true, api: api.update, auth: ['prm:apply:save']},
  delete: {
    show: true,
    api: api.delete, auth: ['prm:apply:delete'],
  },
  formOption: {viewType: 'modal'},
  beforeOpenAdd: () => {
    return true
  },
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: false},
  {
    title: '活动名称', dataIndex: 'activity_id', search: true, width: 80, addDisplay: false, editDisplay: false,
    formType: 'select', dict: { url: 'prm/activity/list?type=1', props: { label: 'name', value: 'id' }, translation: true,pageSize:50,openPage:true },
  },
  {
    title: '会员信息', dataIndex: 'member', formType: 'input', addDisplay: false, editDisplay: false, search: false, width: 180,
  },
  {
    title: '名称', dataIndex: 'name', formType: 'input', width: 80, search: true
  },
  {
    title: '手机号', dataIndex: 'phone', formType: 'input', width: 140, search: true
  },
  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio', addDisplay: false, editDisplay: false,width:80,
    dict: {data: [{key: 0, title: '待审核'}, {key: 1, title: '通过'}, {key: 2, title: '拒绝'}], props: {label: 'title', value: 'key'}, translation: true},
  },
  {
    title: '审核备注', dataIndex: 'audit_remark', formType: 'input', width: 140, search: true
  },

  {
    title: '推广码', dataIndex: 'qrcode', formType: 'input', width: 180, addDisplay: false, editDisplay: false, search: false
  },
  {
    title: '申请时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: false, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:cat_apply'}
</script>

<style scoped>

</style>
